<template>
  <!-- 关注者列表 -->
  <div class="infinite-list-panel" v-loading="loading">
    <div class="infinite-list">
      <!-- 这里触发组件同步更新必须更改key的值为可变 -->
      <div
        class="list-item"
        v-for="item in userData.userDataList"
        :key="item.post_id + Math.random() * 100"
      >
        <NotifyItemComponents :key="Math.random() * 100" :userData="item" />
      </div>
    </div>
    <p class="loading" v-if="userData.loading">{{ $t("postlist.loading") }}</p>
    <p class="addload" v-if="!noMore" @click="addLoadingData">
      {{ $t("postlist.clickaddmore") }}
    </p>
    <p class="nomore" v-if="noMore">{{ $t("postlist.nomore") }}</p>
  </div>
</template>
<script>
//YouFansListItemComponents
import NotifyItemComponents from "@/components/Notify/NotifyItemComponents.vue";
//获取统一请求接口
import { getAllNotifyListByUserId } from "@/api";

export default {
  name: "ALLNotifyListComponents",
  components: {
    NotifyItemComponents,
  },
  props: {
    msg: String,
  },
  data() {
    return {
      user_id: JSON.parse(localStorage.getItem("user")).user_id,
      loading: true,
      userData: {
        user_id: JSON.parse(localStorage.getItem("user")).user_id,
        current_user_id: JSON.parse(localStorage.getItem("user")).user_id,
        currentPage: 1, //起始页数值为1
        loading: false,
        pageSize: 10, //每页查询条数
        pageTotal: 1, //取后端返回内容的总页数
        //测试数据
        userDataList: [{ id: 1 }],
      },
    };
  },
  computed: {
    noMore() {
      //当起始页数大于总页数时停止加载
      return this.userData.currentPage >= this.userData.pageTotal;
    },
    addMore() {
      return !this.noMore();
    },
  },
  mounted() {
    this.initUserNotifyListData();
  },
  methods: {
    initUserNotifyListData() {
      this.loading = true;
      this.loadingNotifyList();
    },
    //分页初始化加载用户列表
    async loadingNotifyList() {
      let res = await getAllNotifyListByUserId(this.userData);
      //  console.log(res.data);
      if (res.state == 200) {
        this.userData.userDataList = res.data.data;
        this.userData.pageTotal = res.data.pageTotal;
        this.userData.loading = false;
        this.loading = false;
      }
    },
    addLoadingData() {
      this.userData.loading = true;
      setTimeout(() => {
        this.userData.currentPage += 1; //页数+1
        this.addLoadingUserList(); //调用接口，此时页数+1，查询下一页数据
      }, 100);
    },
    //分页累加用户列表
    async addLoadingUserList() {
      let res = await getAllNotifyListByUserId(this.userData);
      // console.log(res.data);
      if (res.state == 200) {
        this.userData.userDataList = this.userData.userDataList.concat(
          res.data.data
        );
        this.userData.pageTotal = res.data.pageTotal;
        this.userData.loading = false;
      }
    },
  },
};
</script>
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>
/* 备注：应用下拉加载的外层容器必须设置固定高度，否则会自动无限加载 */
.infinite-list-panel {
  overflow: hidden;
}

.infinite-list {
  overflow: auto;
  /* height: 100vh; */
}

.infinite-list-panel .addload {
  padding: 10px 0;
  text-align: center;
  cursor: pointer;
  color: rgb(29, 155, 240);
  font-weight: 700;
}

.infinite-list-panel .loading,
.infinite-list-panel .nomore {
  text-align: center;
  padding: 10px 0;
  font-weight: 700;
}

.NoData {
  padding: 10px 0;
  text-align: center;
  font-weight: 700;
}
</style>